<template>
  <div style="background-color: #ffffff" class="extend">
    <div style="padding: 20px">
      <Timeline>
        <TimelineItem v-for="(sportsRecord,index) in row.sportsRecordList">
          <p class="time" v-if="$i18n.locale === 'en-US'"> Group {{sportsRecord.groupSeq}}  {{sportsRecord.startTrainTime }} ~ {{sportsRecord.endTrainTime }}
            <Button type="warning" size="small" icon="ios-pulse" style="margin-right: 20px;margin-left: 10px"
                    @click="viewAnalysis(sportsRecord)">{{$t('common.gAnalicsBtn')}}
            </Button>

            <Button type="warning" size="small" icon="ios-play" style="margin-right: 20px;" 
                    @click="playVideo(sportsRecord)">{{$t('common.videoView')}}
            </Button>
           
            <Button type="warning" size="small" 
                    @click="downVideo(sportsRecord,row.actionName,index+1)">{{$t('common.dVideo')}} 
            </Button>
          </p>
          <p class="time" v-else >第{{sportsRecord.groupSeq}}组 {{sportsRecord.startTrainTime }} ~ {{sportsRecord.endTrainTime }}
            <Button type="warning" size="small" icon="ios-pulse" style="margin-right: 20px;margin-left: 10px"
                    @click="viewAnalysis(sportsRecord)">{{$t('common.gAnalicsBtn')}}
            </Button>

            <Button type="warning" size="small" icon="ios-play" style="margin-right: 20px;" 
                    @click="playVideo(sportsRecord)">{{$t('common.videoView')}}
            </Button>
           
            <Button type="warning" size="small" 
                    @click="downVideo(sportsRecord,row.actionName,index+1)">{{$t('common.dVideo')}} 
            </Button>
          </p>
        </TimelineItem>
      </Timeline>
    </div>
<!-- 展示视频播放 -->
<Modal v-model="showVideoVisible" :mask-closable="false" width="800" :title="$t('common.videoView')" mask>
    <VideoModail :videoList="videoList" :curPlayId="curPlayId" :playVideoUrl="playVideoUrl"/>
    <div slot="footer" style="text-align: center">
        <Button @click="showVideoVisible=false">{{$t('cancel')}}</Button>
      </div>
    </Modal>
  </div>

</template>
<script>
import VideoApi from "@/api/videoApi";
import { getToken } from "@/libs/util";
import VideoModail from '../../biz/videoModail.vue'
  export default {
    props: {
      row: Object
    },
    components:{
      VideoModail
    },
    data() {
      return {
         showVideoVisible:false,
        videoList:[],
        curPlayId:'',
        playVideoUrl:'',
        detailColumn: [
          {
            title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          },
          {
            title: this.$t('common.sportStartColumn'), 
            key: 'startTrainTime'
          },
          {
            title: this.$t('common.sportEndColumn') , 
            key: 'endTrainTime'
          },
          {
            title: this.$t('common.optColumn') ,
            key: 'action',
            width: 315,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '15px'
                  },
                  on: {
                    click: () => {
                      this.playVideo(params.row)
                    }
                  }
                }, this.$t('common.videoView')),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '15px'
                  },
                  on: {
                    click: () => {
                      this.viewAnalysis(params.row)
                    }
                  }
                }, this.$t('common.gAnalicsBtn')),
              ])
                ;
            }
          }],
      }
    },
    mounted() {
   
  
  },
    methods: {
      queryVideoList(sportsRecordId,type,downObj={}) {
       
      VideoApi.getVideoList(sportsRecordId).then(
        (res) => {
          
          this.videoList = res.data.data;
          if (this.videoList.length == 0) {
            
            this.$Message.error(this.$t('common.noVideoSport'));
            return;
          }
         
          const video = this.videoList[0];
          this.curPlayId = video.id;
          this.playVideoUrl= "web/video/play/" + video.id + "?token=" + getToken();
          if(type){
            setTimeout(()=>{
          this.showVideoVisible=true
         },1000)
          }else{
            if(this.$i18n.locale === "zh-CN" ){
              this.downLoadAjax(this.playVideoUrl,downObj.actionName+'-第'+downObj.inum+'组视频')
            }else{
              this.downLoadAjax(this.playVideoUrl,downObj.actionName+'-'+downObj.inum+'group of videos')
            }
           
          }
       
        },
        (error) => {
          this.$Message.error(this.$t('common.noVideoSport'));
          this.videoList=[];
        }
      );
    },
      downVideo(row,actionName,inum){
        this.queryVideoList(row.id,0,{actionName,inum});
        
      },
   downLoadAjax(url, name) {
    let that =this;
  const xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  that.$Message.error(that.$t('common.downLoadSuc') );
  xhr.responseType = 'blob'; // 返回类型blob
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    
    // 请求完成
    if (this.status === 200) {
      // 返回200
      const blob = this.response;
      const href = window.URL.createObjectURL(blob); // 创建下载的链接
      // 判断是否是IE浏览器，是的话返回true
      if (window.navigator.msSaveBlob) {
        try {
          window.navigator.msSaveBlob(blob, name);
        } catch (e) {
          that.$Message.error(that.$t('common.downVideoError') );
          console.log(e);
        }
      } else {
        // 谷歌浏览器 创建a标签 添加download属性下载
        const downloadElement = document.createElement('a');
        downloadElement.href = href;
        downloadElement.target = '_blank';
        downloadElement.download = name; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
     
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      }
    }
  };
  // 发送ajax请求
  xhr.send();
},
      playVideo(row) {
       
      this.queryVideoList(row.id,1);
        // const routeData = this.$router.resolve({
        //   name: "video",
        //   query: {sportsRecordId: row.id}
        // });
        
        // window.open(routeData.href, '_blank');
      },
      viewAnalysis(row) {
        const routeData = this.$router.resolve({
          name: "groupReport",
          query: {id: row.id}
        });
        window.open(routeData.href, '_blank');
      },
    }
  }
</script>
<style scoped>
  .extend .time {
    margin-top: -2px;
  }

  .extend .ivu-timeline-item-head {
    width: 16px;
    height: 16px;
  }
</style>
